<script setup>
import GoalCase from './GoalCase.vue'
import GroupComplete from './GroupComplete.vue'
import ProjectOverview from './ProjectOverview/index.vue'
import SelfGrade from './SelfGrade.vue'
import GoalReach from './StudentOverview/GoalReach.vue'
import SelfInfo from './StudentOverview/SelfInfo.vue'
import ProjectGrade from './StudentOverview/ProjectGrade.vue'
import SelfIncrease from './StudentOverview/SelfIncrease.vue'
import GeneralComplete from './StudentOverview/GeneralComments.vue'
import OfflineLearn from './StudentOverview/OfflineLearn.vue'
import OnlineLearn from './StudentOverview/OnlineLearn.vue'
import TenMaster from './StudentOverview/TenMaster.vue'

import { ref } from 'vue'

const isProjectOverview = ref(true)
const onRouterToStudent = (stu) => {
  console.log('------')
  isProjectOverview.value = false
}
</script>

<template>
  <div class="w-full h-full flex gap-x-2 overflow-hidden">
    <transition mode="out-in" leave-active-class="animate__fadeOut">
      <div v-if="isProjectOverview" class="h-full w-full flex flex-col gap-y-2 p-2 overflow-hidden animate__animated">
        <div class="flex-1 w-full flex gap-x-1 h-[90%] overflow-hidden">
          <ProjectOverview/>
          <GoalCase/>
        </div>
        <div class="flex-1 w-full flex gap-x-1 overflow-hidden">
          <GroupComplete/>
          <SelfGrade @row-click="onRouterToStudent"/>
        </div>
      </div>
      <div v-else class="h-full w-full flex flex-col gap-y-2 p-2 overflow-hidden animate__animated">
        <div class="flex-1  w-full gap-x-1 flex">
          <GoalReach/>
          <SelfInfo @back="isProjectOverview = true"/>
        </div>
        <div class="flex-1 w-full gap-x-1 overflow-hidden flex">
          <ProjectGrade/>
          <SelfIncrease/>
          <GeneralComplete/>
        </div>
        <div class="flex-1 w-full gap-x-1 overflow-hidden flex">
          <OfflineLearn/>
          <TenMaster/>
          <OnlineLearn/>
        </div>
      </div>
    </transition>
  </div>

</template>
